<template>
	<view class="app-contanier">
		<u-list>
			<u-list-item class="item" v-for="(item, index) in indexList" :key="index">
				<u-cell  @click="handleToApply(item)">
					<view class="itemAvatar" slot='icon'>
						{{setHours(item.hours)}}
					</view>
					<view class="content" slot='title'>
						<view class="con_body">
							<view class="title">
								{{item.date}}
							</view>
							<view class="subTitle">
								{{item.startTime}} 至 {{item.endTime}}
							</view>
							<view class="reason">
								{{item.reason}}
							</view>
						</view>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [{
						date: '2024-04-05',
						startTime: '2024-04-05 09:00',
						endTime: '2024-04-05 18:00',
						hours: 8,
						reason: '其他'
					},
					{
						date: '2024-04-05',
						startTime: '2024-04-05 09:00',
						endTime: '2024-04-05 18:00',
						hours: 4,
						reason: '其他'
					}
				],
			};
		},
		methods: {
			setHours(hours) {

				if (hours < 8) {
					return hours + 'H'
				}

				return (hours / 8) + 'D'

			},
			handleToApply(item){
				uni.navigateTo({
					url:'/pages/leaveApply/leaveApply'
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-contanier {
		background-color: rgb(238, 238, 238);
	}

	.item {
		margin-top: 12px;
		background-color: #fff;
	}

	.itemAvatar {
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #78a511;
		background-color: #efefef;
		border-radius: 6px;
	}

	.content {
		margin-left: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 18px;

		}

		.subTitle {
			font-size: 14px;
			color: #000;
		}

		.reason {
			font-size: 14px;
			color: #ccc;
		}
	}
</style>